<template>
  <div class="flex trend-box">
    <div class="text" :style="{ color: textColor }">
      <slot v-if="$slots.default"></slot>
      <template v-else>
        {{ text }}
      </template>
    </div>
    <div class="icon">
      <component
        :style="{ color: reverseIconColor ? '#f5222d' : upIconColor }"
        :is="`el-icon${toLine(upIconName)}`"
        v-if="type === 'up'"
      ></component>
      <component
        :style="{
          color: reverseIconColor ? '#00c087' : downIconColor,
        }"
        :is="`el-icon${toLine(downIconName)}`"
        v-else
      ></component>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { toLine } from "@/utils/index.ts";
const props = defineProps({
  text: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "up",
  },
  upIconName: {
    type: String,
    default: "ArrowUp",
  },
  downIconName: {
    type: String,
    default: "ArrowDown",
  },
  upIconColor: {
    type: String,
    default: "#00c087",
  },
  downIconColor: {
    type: String,
    default: "#f5222d",
  },
  reverseIconColor: {
    type: Boolean,
    default: false,
  },
  // 上升趋势文字颜色
  upTextColor: {
    type: String,
    default: "rgb(0,0,0)",
  },
  // 下降趋势的文字颜色
  downTextColor: {
    type: String,
    default: "rgb(0,0,0)",
  },
});
let textColor = computed(() => {
  return props.type === "up" ? props.upTextColor : props.downTextColor;
});
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
  .text {
    margin-right: 5px;
    font-size: 12px;
  }
  .icon {
    svg {
      width: 0.8em;
      height: 0.8em;
    }
  }
}
</style>
